import React, { useEffect, useState } from 'react';
import { useDispatch } from 'umi';
import { Button, Table, Tag, Space, Modal } from 'antd';
import { getQuestionType } from '@/services/index';
import './_addQusetions.less';
const columns = [
  {
    title: '类型id',
    dataIndex: 'questions_type_id',
    key: 'questions_type_id',
    render: (text: any) => <a>{text}</a>,
  },
  {
    title: '类型名称',
    dataIndex: 'questions_type_text',
    key: 'questions_type_text',
  },
  {
    title: '操作',
  },
];
const App = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        添加类型
      </Button>
      <Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>
          <input type="text" className="leixing" placeholder="请输入类型" />
        </p>
      </Modal>
    </>
  );
};
const QuestionType: React.FC = () => {
  // 通过useDispatch拿到派发redux的dispatch
  const [examKao, setExamkao] = useState<any[]>([]);
  const dispatch = useDispatch();
  //xuanran
  useEffect(() => {
    getQuestionType().then((res) => {
      setExamkao(res.data);
      // debugger;
    });
  }, []);
  useEffect(() => {
    dispatch({
      type: 'question/getQuestionType',
    });
  }, []);

  return (
    <div>
      <App />
      <Table columns={columns} dataSource={examKao} />
    </div>
  );
};

export default QuestionType;
